<template>
	<transition name="header">
		<div class="header" v-if="headerVisible">
			<div class="left">
				<router-link class="logo-link" to="/">
					<el-avatar class="logo" shape="square" :size="50" icon="ElementPlus" />
					<div class="logo-name">{{ title }}</div>
				</router-link>
				<v-navigator></v-navigator>
			</div>
			<v-tools></v-tools>
		</div>
	</transition>
</template>

<script setup>
import { useTheme } from "./modules/theme"
import VNavigator from "./components/navigator.vue"
import VTools from "./components/tools.vue"
import { title } from "/utils"

const { style, headerVisible } = useTheme()
</script>

<style lang="scss" scoped>
.header {
	height: v-bind("style.height");
	background: var(--first-nav-background);
	color: #fff;
	transition: var(--transition);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: inherit;
		width: calc(100% - 320px);
		.logo-link {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: inherit;
			white-space: nowrap;
			flex: none;
		}
		.logo {
			background: #e50000;
		}
		.logo-name {
			padding-left: 15px;
			font-size: 26px;
			font-weight: 700;
			letter-spacing: 1px;
		}
	}
	&.header-enter-from,
	&.header-leave-to {
		top: calc(v-bind("style.height") * -1);
	}
}
</style>
